<template>
  <div class="word-arrangement">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />
    <div v-else>
      <MyHeaderInLesson :lesson="lesson" :moduleName="'单词排列'" />

      <AudioControls
        :current-index="currentSentenceIndex"
        :total-items="lesson.content.length"
        :is-playing="isPlaying"
        @previous="playPrevious"
        @toggle-playback="togglePlayback"
        @next="playNext"
        @speed-change="changeSpeed"
      />

      <!-- 句子选择下拉框 -->
      <div class="sentence-selector">
        <el-select v-model="currentSentenceIndex" placeholder="请选择句子" style="width: 100%" class="mosaic-text">
          <el-option
            v-for="(sentence, index) in lesson.content"
            :key="index"
            :label="`${index + 1}. ${sentence.english}`"
            :value="index"
          >
            <div class="sentence-option">
              <span class="sentence-number">{{ index + 1 }}.</span>
              <span class="sentence-text">{{ sentence.english }}</span>
            </div>
          </el-option>
        </el-select>
      </div>

      <!-- 排列练习控制选项 -->
      <div class="arrangement-options">
        <el-button @click="playCurrentSentence" class="control-button"> 朗读 </el-button>
        <el-button @click="showHint" :disabled="isCompleted" class="control-button"> 提示 </el-button>
        <el-button @click="resetExercise" class="control-button primary"> 重置 </el-button>
      </div>

      <!-- 练习统计 -->
      <div class="exercise-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-label">单词数量</div>
              <div class="stat-value">{{ wordCount }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-label">点击次数</div>
              <div class="stat-value">{{ clickCount }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-label">正确率</div>
              <div class="stat-value">{{ accuracy }}%</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-label">完成度</div>
              <div class="stat-value">{{ completion }}%</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 中文翻译显示 -->
      <div class="chinese-translation">
        {{ currentSentence.chinese }}
      </div>

      <!-- 单词排列区域 -->
      <div class="arrangement-area">
        <h3>请将下列单词重新排列组成正确的句子</h3>

        <!-- 用户排列区域 -->
        <div class="user-words-area">
          <draggable
            v-model="userWords"
            :disabled="isCompleted"
            class="word-container"
            group="words"
            item-key="tempId"
            @change="onWordMove"
          >
            <template #item="{ element }">
              <div
                class="word-item"
                :class="{ correct: element.isCorrect && userWords.indexOf(element) === element.index }"
              >
                {{ element.text }}
              </div>
            </template>
            <template #footer>
              <div v-if="userWords.length === 0" class="empty-placeholder">请从下方选择单词并拖拽到此处</div>
            </template>
          </draggable>
        </div>

        <!-- 原始单词区域 -->
        <div class="original-words-area">
          <draggable v-model="originalWords" class="word-container" group="words" item-key="tempId">
            <template #item="{ element }">
              <div class="word-item">
                {{ element.text }}
              </div>
            </template>
          </draggable>
        </div>

        <!-- 完成提示 -->
        <div v-if="isCompleted" class="completion-message">
          <el-alert title="恭喜！句子排列正确！" type="success" show-icon center />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import AudioControls from '../components/text-study/AudioControls.vue'
import { ElSkeleton, ElAlert, ElPageHeader, ElButton, ElRow, ElCol } from 'element-plus'
import { lessonLoader } from '../mixins/lessonLoader.js'
import MyHeaderInLesson from '../components/layout/MyHeaderInLesson.vue'
import { wordArrangementMixin } from '../mixins/wordArrangementMixin.js'

export default {
  name: 'WordArrangement',
  components: {
    draggable,
    AudioControls,
    ElSkeleton,
    ElAlert,
    ElPageHeader,
    ElButton,
    ElRow,
    ElCol,
    MyHeaderInLesson
  },
  mixins: [lessonLoader, wordArrangementMixin],
}
</script>

<style scoped lang="scss">
@use '../assets/styles/wordArrangement.scss';

.sentence-selector {
  margin: 20px 0;

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-select-dropdown__item) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sentence-option {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;

    .sentence-number {
      flex-shrink: 0;
      margin-right: 8px;
      font-weight: bold;
    }

    .sentence-text {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.user-words-area.error-highlight {
  animation: error-shake 0.5s ease-in-out;

  :deep(.word-container) {
    border: 2px solid var(--el-color-danger) !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  }
}

@keyframes error-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}
</style>